<template>
  <view class="common-class">
    <view class="has-data">
      <view class="concern">
        <view
          class="item"
          v-for="v in gzh"
          :key="v.article_id"
          @click="HandleView(v.article_id)"
        >
          <view class="nav-item">
            <view
              class="cover br10"
              :style="{
                backgroundImage:
                  'url(' + v.content.news_item[0].thumb_url + ')',
              }"
            >
            </view>
            <view class="info">
              <view class="title t2">
                {{ v.content.news_item[0].title }}
              </view>
              <view class="intro t2">
                {{ v.content.news_item[0].digest }}
              </view>
              <view class="flex-between view-time">
                <view class="view-num">
                  作者{{ v.content.news_item[0].author }}
                </view>
                <view class="time">
                  {{ getLocalTime(v.content.create_time) }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <u-back-top
        :scrollTop="scrollTop"
        bottom="40"
        :custom-style="{ background: 'transparent' }"
      >
        <view class="back-top-image">
          <image src="/static/icon/icon-back-top.png" mode="widthFix"></image>
        </view>
      </u-back-top>
      <ALoading v-show="aloading"></ALoading>
      <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
      <view class="no-more">
        <u-loadmore :status="status" font-size="24" :load-text="loadText" />
      </view>
      <u-no-network></u-no-network>
    </view>
  </view>
</template>

<script>
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html"
export default {
  components: { mpHtml },
  data() {
    return {
      gzh: [],
      aloading: true,
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "我也是有底线的",
      },
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ")
    },
    getList() {
      let data = {
        id: 1,
      }
      this.$store.dispatch("gzh/list", data).then(res => {
        console.log(res.item)
        this.gzh = res.item
        this.aloading = false
      })
    },
    HandleView(id) {
      uni.navigateTo({
        url: "/pages/gzh/webview/webview?id=" + id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.concern {
  padding: 0 20upx;
  .item {
    background: #fff;
    margin: 20upx 0;
    padding: 20upx;
    box-sizing: border-box;
    .nav-item {
      width: calc(100vw - 80upx);
      .cover {
        position: relative;
        width: 100%;
        height: 40vw;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .info {
        margin-top: 10upx;
        .title {
          font-size: 24upx;
          font-weight: 600;
          line-height: 36upx;
        }
        .intro {
          margin-top: 10upx;
          line-height: 30upx;
          font-size: 22upx;
        }
        .view-time {
          margin-top: 10upx;
          font-size: 22upx;
          color: #666666;
        }
      }
    }
  }
}
</style>
